import React, { PureComponent } from 'react';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Spin, Tag, Menu, Icon, Avatar } from 'antd';
import moment from 'moment';
import groupBy from 'lodash/groupBy';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import NoticeIcon from '../NoticeIcon';
import cookie from "react-cookies";

export default class GlobalHeaderRight extends PureComponent {

  state = {
    msgList: [],
    count:0
  };
//   constructor(props){
// console.log(111111);
//     super(props);
//     this.state={
//       msgList:[]
//     }
//   }

  componentDidMount() {
    this.initWebSocket();
    // const { dispatch } = this.props;
    // dispatch({
    //   type: 'account/getToken',
    //   payload: {
    //     grant_type:'password',
    //     username:'mp',
    //     password:'123456',
    //     scope:'read',
    //     client_id:'zuul-gateway',
    //     client_secret:'123456',
    //   },
    // });
    // dispatch({
    //   type: 'account/userTest',
    //   payload: {
    //
    //   },
    // });
  }


  initWebSocket(){

    const wsuri = "ws://10.10.15.26:8085/watch/employee?user_id=" + cookie.load("user_id");

    this.websock = new WebSocket(wsuri);
    this.websock.onopen = this.websocketonopen.bind(this);
    this.websock.onerror = this.websocketonerror.bind(this);
    this.websock.onmessage = this.websocketonmessage.bind(this);
    this.websock.onclose = this.websocketclose.bind(this);

  };
  websocketonopen() {
    console.log("WebSocket连接成功");
  };
  websocketonerror() {

    console.log("WebSocket连接发生错误");

  };

  websocketonmessage(e){
    if(e.data && !(e.data.indexOf("count")>0)){
      console.log(e.data)
      this.state.msgList.push({description:e.data});
      this.setState(prevState => ({
        msgList: prevState.msgList,
        count: prevState.msgList?prevState.msgList.length:0
      }));
    }

  };

  websocketsend(agentData){
    this.websock.send(agentData);
  };

  websocketclose(e){

    console.log('连接关闭:' + e.code + ")");
  };

  render() {
    const {
      currentUser,
      // fetchingNotices,
      onNoticeVisibleChange,
      onMenuClick,
      onNoticeClear,
      theme,
    } = this.props;
    currentUser.avatar = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png';
    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
        <Menu.Item key="logout">
          <Icon type="logout" />
          <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
        </Menu.Item>
      </Menu>
    );
    // const noticeData = this.getNoticeData();
    // const unreadMsg = this.getUnreadData(noticeData);
    let className = styles.right;
    if (theme === 'dark') {
      className = `${styles.right}  ${styles.dark}`;
    }
    return (
      <div className={className}>
        <NoticeIcon
          refs="notice"
          className={styles.action}
          count={this.state.count}
          // onItemClick={(item, tabProps) => {
          //   console.log(item, tabProps); // eslint-disable-line
          //   this.changeReadState(item, tabProps);
          // }}
          locale={{
            emptyText: "暂无数据",
            clear: "清空",
            viewMore: "查看更多",
            notification: "通知",
            message: "消息",
            event: "待办",
          }}
          onClear={onNoticeClear}
          onPopupVisibleChange={onNoticeVisibleChange}
          clearClose
        >
          <NoticeIcon.Tab
            count={this.state.msgList.length}
            list={this.state.msgList}
            title="message"
            emptyText="您已读完所有消息"
            emptyImage="https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg"
            showViewMore
          />
        </NoticeIcon>
        {currentUser.name ? (
          <HeaderDropdown overlay={menu}>
            <span className={`${styles.action} ${styles.account}`}>
              <Avatar
                size="small"
                className={styles.avatar}
                src={currentUser.avatar}
                alt="avatar"
              />
              <span className={styles.name}>{currentUser.name}</span>
            </span>
          </HeaderDropdown>
        ) : (
          <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
        )}
      </div>
    );
  }
}
